.appCompNone {
  background-color: rgba(var(--design-rgba-near), 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

.appCompBgSm {
  .appNearBgSm();
  .appBackdropFilterBlurSm();
}

.appCompBg {
  .appNearBg();
  .appBackdropFilterBlur();
}

.appCompBgLg {
  .appNearBgLg();
  .appBackdropFilterBlurLg();
}

.appBackdropFilterBlurSm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.appBackdropFilterBlur {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.appBackdropFilterBlurLg {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.appNearBgSm {
  background-color: rgba(var(--design-rgba-near), 0.2);
}

.appDistantBgSm {
  background-color: rgba(var(--design-rgba-distant), 0.2);
}

.appNearBg {
  background-color: rgba(var(--design-rgba-near), 0.4);
}

.appDistantBg {
  background-color: rgba(var(--design-rgba-distant), 0.4);
}

.appNearBgLg {
  background-color: rgba(var(--design-rgba-near), 0.6);
}

.appDistantBgLg {
  background-color: rgba(var(--design-rgba-distant), 0.6);
}